import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/pages/dashboard'
import Welcome from '@/pages/welcome'
import Login from '@/pages/login'
import ErrorPage from '@/pages/error'
import Error401 from '@/pages/error/401'
import Error404 from '@/pages/error/404'

import * as RouteComponent from './map' // 所有路由组件
import PersonalRoutes from './routes/personal'
// import GoodsRoutes from './routes/goods'
// import OrderRoutes from './routes/order'
// import MemberRoutes from './routes/member'
// import SystemRoutes from './routes/system'
// import MinaShopRoutes from './routes/mina-shop'
// import CartRoutes from './routes/cart'
import store from '../store'
Vue.use(Router)

// 预先读取本地路由
let routes = []
if (store.state.system.routes && store.state.system.routes.length > 0) {
  // 遍历处理路由数据
  routes = filterAsyncRouter(store.state.system.routes, '/dashboard/')
}

const router = new Router({
  linkActiveClass: 'active', // 将router-link-active定义为active
  linkExactActiveClass: 'exact-active', // router-link-exact-active定义为exact-active
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      redirect: '/dashboard/welcome',
      meta: {
        requiresAuth: true // 需要登录访问的标识
      },
      component: Dashboard,
      children: [
        PersonalRoutes,
        ...routes, // 直接添加本地读取的路由
        // GoodsRoutes,
        // OrderRoutes,
        // MemberRoutes,
        // SystemRoutes,
        // MinaShopRoutes,
        // CartRoutes,
        {
          path: '/dashboard/welcome',
          component: Welcome
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/error',
      component: ErrorPage,
      children: [
        {
          path: '404',
          component: Error404
        },
        {
          path: '401',
          component: Error401
        }
      ]
    },
    {
      path: '*',
      redirect: '/dashboard/welcome'
    }
  ]
})
// 定义一个方法用于验证是否已经登录（可以根据state中的用户token判断是否已经登录成功）
function isLogin () {
  // console.log(store)
  if (store.state.user.info.access_token !== '') {
    return true
  }
  return false
}

// 映射动态路由数据
function filterAsyncRouter (routes, prefix) {
  return routes.map((item) => {
    let route = {}
    if (item.component) {
      route.path = prefix + item.path // 拼接前缀地址
      route.component = RouteComponent[item.component] // 组件替换成映射的组件
      route.title = item.title
    }
    if (item.redirect) { // 如果有路由重定向
      route.redirect = item.redirect
    }
    if (item.meta) { // 添加权限信息
      route.meta = item.meta
    } else {
      route.meta = {}
    }
    // 如果当前路由有子路由，需要再进行子路由递归
    if (item.children && item.children.length) {
      route.children = filterAsyncRouter(item.children, route.path + '/')
    }
    return route
  })
}

// 处理路由数据并动态追加路由，把后台返回对应组件的字段名指向对应的组件（后台返回的是字符串）
function dynamicAddRoutes (menuList) {
  const routes = filterAsyncRouter(menuList, '/dashboard/')
  // console.log(routes)
  routes.forEach(item => {
    // 给dashboard的子路由添加
    router.options.routes[0].children.push(item)
  })
  // 把子路由添加到父级
  let parentRoute = [{
    path: '/dashboard',
    redirect: '/dashboard/welcome',
    meta: {
      requiresAuth: true // 需要登录访问的标识
    },
    component: Dashboard,
    children: routes
  }]
  router.addRoutes(parentRoute)
}

// 方法一（前端控制）：1.检测当前角色是否具有访问权限
// function isHasPower(to) {
//   return to.matched.every(record => {
//     console.log(record.meta.requiresRole, store.state.user.info.user_role)
//     if (record.meta.requiresRole) { // 如果已标记需要权限访问
//       // 判断当前角色是否在权限范围内
//       if (record.meta.requiresRole.includes(store.state.user.info.user_role)) {
//         return true
//       } else {
//         return false
//       }
//     } else { // 没有直接标记则直接访问
//       return true
//     }
//   })
// }
// 使用路由前置守卫实现登录拦截
router.beforeEach((to, from, next) => {
  // 判断是否有meta登录访问标识
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断是否已经登录
    if (isLogin()) {
      // 2.操作鉴权还需要根据当前的登录角色来判断是否有权限
      // console.log(to)
      // if (isHasPower(to)) {
      //   next()
      // } else {
      //   next({
      //     path: '/error/401'
      //   })
      //   console.log('当前账号没有权限')
      // }

      // 方法二（配合后端数据接口动态渲染路由）：
      // 登录之后先校验本地是否已经获取到菜单数据，如果没有则调取接口数据，获取之后存储到本地仓库
      if (!store.state.system.routes) {
        store.commit('system/setIsLoading', true)
        Vue.prototype.$http.getRouteList().then(res => {
          store.commit('system/setIsLoading', false)
          if (res && res.data.code === 200) {
            // console.log(res)
            // 路由排序
            let menuList = res.data.data.sort((a, b) => a.sort - b.sort)
            // let menuList = res.data.data
            // 存储到本地仓库
            store.dispatch('system/saveRoutes', menuList)
            // console.log(menuList)
            // 添加动态路由
            dynamicAddRoutes(menuList)
          } else {
            store.dispatch('system/saveRoutes', [])
          }
          console.log(router)
          next()
        })
      } else {
        next()
      }
    } else {
      // 为了考虑登录成功后，还需要跳转回到登录前的拦截地址，可以传递一个参数
      next({
        path: '/login',
        query: {
          redirect: to.fullPath
        }
      })
    }
  } else {
    next()
  }
})

export default router
